<template>
  <div class="material-management-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>物料管理</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleCreate">新建物料</el-button>
            <el-upload
              class="upload-btn"
              :action="uploadUrl"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
            >
              <el-button type="primary">导入物料</el-button>
            </el-upload>
            <el-button type="primary" @click="handleExport">导出物料</el-button>
          </div>
        </div>
      </template>

      <!-- 示例表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="materialCode" label="物料编码" width="150"></el-table-column>
        <el-table-column prop="name" label="物料名称" width="180"></el-table-column>
        <el-table-column prop="specification" label="规格型号" width="180"></el-table-column>
        <el-table-column prop="stockQuantity" label="库存数量" width="100"></el-table-column>
        <el-table-column prop="address" label="存放地址"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新建物料对话框 -->
    <el-dialog
      title="新建物料"
      v-model="dialogVisible"
      width="30%"
    >
      <el-form :model="createForm" label-width="80px">
        <el-form-item label="物料编码">
          <el-input v-model="createForm.materialCode"></el-input>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="createForm.name"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="createForm.specification"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
          <el-input-number v-model="createForm.stockQuantity" :min="0"></el-input-number>
        </el-form-item>
        <!-- 其他表单项 -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitCreateForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const tableData = ref([
  {
    materialCode: 'MAT001',
    name: '材料1',
    specification: 'M6x20',
    stockQuantity: 500,
    address: '广东东莞',
  },
  {
    materialCode: 'MAT002',
    name: '材料2',
    specification: 'L200x100',
    stockQuantity: 300,
    address: '广东深圳',
  },
  // ... 其他数据
]);

const currentPage = ref(1);
const pageSize = ref(10);
const dialogVisible = ref(false);
const createForm = ref({
  name: '',
  // ... 其他表单项
});

const handleCreate = () => {
  dialogVisible.value = true;
};

const submitCreateForm = () => {
  // 处理新建物料逻辑
  dialogVisible.value = false;
  ElMessage.success('物料创建成功');
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

const handleExport = () => {
  // 处理导出逻辑
  ElMessage.success('物料导出成功');
};

const beforeUpload = (file) => {
  // 在上传前进行验证
  return true;
};

const handleUploadSuccess = (response) => {
  // 处理上传成功逻辑
  ElMessage.success('物料导入成功');
};

</script>

<style scoped>
.material-management-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  text-align: right;
}
</style>

<template>
  <div class="material-management-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>物料管理</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleCreate">新建物料</el-button>
            <el-upload
              class="upload-btn"
              :action="uploadUrl"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
            >
              <el-button type="primary">导入物料</el-button>
            </el-upload>
            <el-button type="primary" @click="handleExport">导出物料</el-button>
          </div>
        </div>
      </template>

      <!-- 示例表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="materialCode" label="物料编码" width="150"></el-table-column>
        <el-table-column prop="name" label="物料名称" width="180"></el-table-column>
        <el-table-column prop="specification" label="规格型号" width="180"></el-table-column>
        <el-table-column prop="stockQuantity" label="库存数量" width="100"></el-table-column>
        <el-table-column prop="address" label="存放地址"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新建物料对话框 -->
    <el-dialog
      title="新建物料"
      v-model="dialogVisible"
      width="30%"
    >
      <el-form :model="createForm" label-width="80px">
        <el-form-item label="物料编码">
          <el-input v-model="createForm.materialCode"></el-input>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="createForm.name"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="createForm.specification"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
          <el-input-number v-model="createForm.stockQuantity" :min="0"></el-input-number>
        </el-form-item>
        <!-- 其他表单项 -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitCreateForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const tableData = ref([
  {
    materialCode: 'MAT001',
    name: '材料1',
    specification: 'M6x20',
    stockQuantity: 500,
    address: '广东东莞',
  },
  {
    materialCode: 'MAT002',
    name: '材料2',
    specification: 'L200x100',
    stockQuantity: 300,
    address: '广东深圳',
  },
  // ... 其他数据
]);

const currentPage = ref(1);
const pageSize = ref(10);
const dialogVisible = ref(false);
const createForm = ref({
  name: '',
  // ... 其他表单项
});

const handleCreate = () => {
  dialogVisible.value = true;
};

const submitCreateForm = () => {
  // 处理新建物料逻辑
  dialogVisible.value = false;
  ElMessage.success('物料创建成功');
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

const handleExport = () => {
  // 处理导出逻辑
  ElMessage.success('物料导出成功');
};

const beforeUpload = (file) => {
  // 在上传前进行验证
  return true;
};

const handleUploadSuccess = (response) => {
  // 处理上传成功逻辑
  ElMessage.success('物料导入成功');
};

</script>

<style scoped>
.material-management-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  text-align: right;
}
</style>
